<template>
    <div>
        <el-row>
            <el-col :span="18">
                <el-select v-model="form.status" clearable placeholder="核销状态" class="mt">
                    <el-option
                            v-for="item in verificationStatus"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
                <el-input v-model="form.name" placeholder="宝宝姓名"  style="width: 204px" class="mt" clearable></el-input>
                <el-input v-model="form.mother_mobile" placeholder="母亲手机号"  style="width: 204px" class="mt" clearable></el-input>
                <el-input v-model="form.giftName" placeholder="礼品名称"  style="width: 204px" class="mt" clearable></el-input>
                <el-date-picker
                        class="mt"
                        v-model="form.time1"
                        type="datetimerange"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        range-separator="至"
                        start-placeholder="完成时间开始"
                        end-placeholder="完成时间结束">
                </el-date-picker>
                <el-date-picker
                        class="mt"
                        v-model="form.time2"
                        type="datetimerange"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        range-separator="至"
                        start-placeholder="核销时间开始"
                        end-placeholder="核销时间结束">
                </el-date-picker>
            </el-col>
            <el-col :span="6" style="text-align: right">
                <el-button type="primary" plain @click="_signVerifyList()">查询</el-button>
                <el-button type="primary" @click="exportExcel">导出</el-button>
            </el-col>
        </el-row>

        <!--   表格开始     -->
        <el-table :data="tableData" v-loading="loading" style="width: 100%;margin-top: 15px;" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
            <el-table-column label="宝宝姓名">
                <template slot-scope="scope">
                    <span style="color: #409eff">{{ scope.row.baby_name }}</span>
                </template>
            </el-table-column>
            <el-table-column label="手机号码（母亲）" prop="mother_mobile"></el-table-column>
            <el-table-column label="签约礼品">
                <template slot-scope="scope">
                    <img :src="scope.row.image" alt="" style="width: 30px;height: 30px;border-radius: 3px;">
                    <span style="color: #409eff">{{ scope.row.name }}</span>
                </template>
            </el-table-column>
            <el-table-column label="顾问" prop="counselor_nickname" width="100"></el-table-column>
            <el-table-column label="完成时间" prop="audit_time" width="100"></el-table-column>
            <el-table-column label="状态">
                <template slot-scope="scope">
                    <span :style="{color: scope.row.status === 1 ? '#409eff' : '#F56C6C' }">{{ scope.row.status_test }}</span>
                </template>
            </el-table-column>
            <el-table-column label="核销人">
                <template slot-scope="scope">
                    <span style="color: #409eff">{{ scope.row.verify_nickname }}</span>
                </template>
            </el-table-column>
            <el-table-column label="核销时间" prop="verifytime" width="100"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-popover
                            ref="popover"
                            placement="left-start"
                            trigger="click">
                        <img :src="scope.row.qrcode" alt="" style="width: 120px;height: 120px;">
                    </el-popover>
                    <el-tooltip class="item" effect="dark" content="二维码" placement="top">
                        <el-button size="mini" v-popover:popover icon="fa fa-qrcode" circle style="margin: 0 10px;width: 29px;height: 29px"></el-button>
                    </el-tooltip>
                    <el-popover
                            ref="popover"
                            placement="left-start"
                            trigger="click">
                        <img :src="scope.row.qrcode" alt="" style="width: 120px;height: 120px;">
                    </el-popover>
<!--                    <el-popconfirm title="确定核销吗？" v-if="scope.row.status === 0" @onConfirm="sureVerification(scope.$index, scope.row)">-->
<!--                        <el-button slot="reference" size="mini">核销</el-button>-->
<!--                    </el-popconfirm>-->
                    <el-button @click="open(scope.$index, scope.row)" size="mini" v-if="scope.row.status === 0">核销</el-button>
                </template>

            </el-table-column>
        </el-table>

        <!--分页-->
        <Pagination @handleClickPage="currentPage" :total="total"></Pagination>
    </div>
</template>

<script>
    import Pagination from '../../components/pagination'
    import { signVerifyList, signVerify, exportGiftVerify } from '../../api/gift-verificationApi'
    export default {
        name: "gift-verification",
        data () {
            return {
                form: {
                    status: '',
                    name: '',
                    mother_mobile: '',
                    giftName: '',
                    time1: [],
                    time2: [],
                },
                verificationStatus: [
                    {
                        id: 1,
                        name: '已核销'
                    },
                    {
                        id: 0,
                        name: '未核销'
                    }
                ],
                tableData: [],
                loading: true,
                total: 0,
                page: 1, // 页数
                visibleDel: false
            }
        },
        created() {
            this._signVerifyList()
        },
        methods: {
            async _signVerifyList() {
                let data = {p: this.page,length: 10,mother_mobile: this.form.mother_mobile,status: this.form.status}
                const res = await signVerifyList(data)
                // console.log(res)
                this.tableData = res.data.list
                this.total = res.data.total
                this.loading = false
            },
            // 分页的 当前点击的页数
            currentPage(newPage) {
                console.log(`当前页: ${newPage}`)
                this.page = newPage
                this.loading = true
                this._signVerifyList()
            },
            async sureVerification(index, row) {
                // console.log(row)
                await signVerify({id: row.id})
                this.$message.success('核销成功')
                this._signVerifyList()
            },
          open(index, row) {
            this.$confirm('确定核销吗？?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.sureVerification(index, row)
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消'
              });
            });
          },
            async exportExcel() {
                let param = new URLSearchParams()
                param.append("p", this.page)
                param.append("length", 10000)
                param.append("export", 1)
                param.append("mother_mobile", this.form.mother_mobile)
                param.append("status", this.form.status)
                const res = await exportGiftVerify(param)
                // console.log(res)
                const link = document.createElement('a')
                let blob = new Blob([res],{type: 'application/vnd.ms-excel'})
                link.style.display = 'none'
                link.href = URL.createObjectURL(blob)
                let num = new Date().getTime()
                link.setAttribute('download', `礼品核销_${num}.xlsx`)
                document.body.appendChild(link)
                link.click()
                document.body.removeChild(link)
            }
        },
        components: {
            Pagination
        }
    }
</script>

<style scoped lang="scss">
    .mt {
        margin-top: 5px;
    }
</style>
